<template>
    <el-container>
        <el-header style="background:black;color:white; line-height: 60px;">
            <el-row>
                <!-- 分为24 span -->
                <el-col :span="1">
                    <el-icon style="font-size:30px;">
                        <Eleme />
                    </el-icon>
                </el-col>
                <el-col :span="3" :offset="20">
                    <span>
                        <el-icon>
                            <UserFilled />
                        </el-icon>欢迎XX
                    </span>
                    <span style="margin-left:20px;" @click="loginOut">
                        <el-icon>
                            <SwitchFilled />
                        </el-icon>退出登录
                    </span>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside>
                <el-menu :collapse="false" 
                text-color="#999" 
                active-text-color="black"
                router
                style="height:calc(100vh - 60px)"
                 :default-active="activePath">
                    <el-sub-menu v-for="(item,index) in menus" :index="`${index+1}`" :key="index">
                        <template v-slot:title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(val,i) in item.children" :index="val.path">
                            <el-icon>
                               <component :is="val.icon"></component>
                            </el-icon>{{val.title}}
                        </el-menu-item>
                        
                    </el-sub-menu>
                    
                </el-menu>
            </el-aside>
            <el-main style="height:calc(100vh - 60px);">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="item in $route.matched" :to="`${item.path}`">
                        {{item.meta.title}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div class="content">
                        <el-divider />
                        <!-- 子路由匹配的组件的渲染出口 -->
                        <RouterView/>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { onMounted, reactive, ref, watch, watchEffect } from 'vue';
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
import axios from '@/utils/http'
let router=useRouter();
let store=useStore();//实例化store对象
let activePath=ref("/manage/question");
let route=useRoute();//this.$route //获取route对象 route对象里面的属性.
// console.log(route.fullPath);
activePath.value=route.fullPath;//改变高亮菜单的路径值
let menus=reactive([
    {
        title:"面试题管理",
        icon:"QuestionFilled",
        children:[
            {title:"添加面试题",path:"/manage/question_add",icon:"DocumentAdd"},
            {title:"面试题列表",path:"/manage/question",icon:"List"},
        ]
    },
    {
        title:"答案管理",
        icon:"ChatRound",
        children:[
            {title:"添加答案",path:"/manage/answer_add",icon:"ChatDotSquare"},
            {title:"答案列表",path:"/manage/answer",icon:"ChatLineSquare"},
        ]
    },
    {
        title:"分类管理",
        icon:"Menu",
        children:[
            {title:"添加分类",path:"/manage/category_add",icon:"FolderAdd"},
            {title:"分类列表",path:"/manage/category",icon:"Grid"},
        ]
    },
    {
        title:"用户管理",
        icon:"Avatar",
        children:[
            {title:"添加用户",path:"/manage/user_add",icon:"Plus"},
            {title:"用户列表",path:"/manage/user",icon:"Histogram"},
        ]
    }
]);
watchEffect(()=>{
    document.title=route.meta.title;
})
let loginOut=()=>{
    store.commit("logOut");
    ElMessage({
        message:"退出成功",
        type:"success",
        duration:2000,
        "on-close":()=>{
            router.push("/login");
        }
    })
}
</script>

<style lang="scss" scoped>

</style>